<template>
  <div class="header-nav">
    <ul class="nav">
      <li class="nav-child">
        <router-link to="/">我的美团</router-link>
        <dl class="list my">
          <dd>
            <router-link to="/">我的订单</router-link>
          </dd>
          <dd>
            <router-link to="/">我的收藏</router-link>
          </dd>
          <dd>
            <router-link to="/">抵用券</router-link>
          </dd>
          <dd>
            <router-link to="/">账户设置</router-link>
          </dd>
        </dl>
      </li>
      <li class="nav-child">
        <router-link to="/">手机App</router-link>
      </li>
      <li class="nav-child">
        <router-link to="">商家中心</router-link>
        <dl class="list business">
          <dd>
            <router-link to="/">美团餐饮商户中心</router-link>
          </dd>
          <dd>
            <router-link to="/">登录商家中心</router-link>
          </dd>
          <dd>
            <router-link to="/">美团智能收银</router-link>
          </dd>
          <dd>
            <router-link to="/">我想合作</router-link>
          </dd>
          <dd>
            <router-link to="/">我想合作</router-link>
          </dd>
          <dd>
            <router-link to="/">手机免费开店</router-link>
          </dd>
          <dd>
            <router-link to="/">到店综合业务招募</router-link>
          </dd>
          <dd>
            <router-link to="/">餐饮合作商招募</router-link>
          </dd>
          <dd>
            <router-link to="/">商家申请开票</router-link>
          </dd>
          <dd>
            <router-link to="/">免费合作美团排队</router-link>
          </dd>
        </dl>
      </li>
      <li class="nav-child">
        <router-link to="">美团规则</router-link>
        <dl class="list my">
          <dd>
            <router-link to="/">规则中心</router-link>
          </dd>
          <dd>
            <router-link to="/">规则目录</router-link>
          </dd>
          <dd>
            <router-link to="/">规则评议院</router-link>
          </dd>
        </dl>
      </li>
      <li class="nav-child">
        <router-link to="">网站导航</router-link>
        <div class="navigation list clearfix">
          <dl class="hotel navi-l">
            <dt>酒店旅游</dt>
            <dd>
              <router-link to="/">国际机票</router-link>
            </dd>
            <dd>
              <router-link to="/">火车票</router-link>
            </dd>
            <dd>
              <router-link to="/">民宿</router-link>
            </dd>
            <dd>
              <router-link to="/">经济型酒店</router-link>
            </dd>
            <dd>
              <router-link to="/">主题酒店</router-link>
            </dd>
            <dd>
              <router-link to="/">商务酒店</router-link>
            </dd>
            <dd>
              <router-link to="/">公寓</router-link>
            </dd>
            <dd>
              <router-link to="/">豪华酒店</router-link>
            </dd>
            <dd>
              <router-link to="/">客栈</router-link>
            </dd>
            <dd>
              <router-link to="/">青年旅舍</router-link>
            </dd>
            <dd>
              <router-link to="/">度假酒店</router-link>
            </dd>
            <dd>
              <router-link to="/">别墅</router-link>
            </dd>
            <dd>
              <router-link to="/">农家院</router-link>
            </dd>
          </dl>
          <dl class="food navi-l">
            <dt>吃美食</dt>
            <dd>
              <router-link to="/">烤鱼</router-link>
            </dd>
            <dd>
              <router-link to="/">烧烤</router-link>
            </dd>
            <dd>
              <router-link to="/">火锅</router-link>
            </dd>
            <dd>
              <router-link to="/">特色小吃</router-link>
            </dd>
            <dd>
              <router-link to="/">自助餐</router-link>
            </dd>
            <dd>
              <router-link to="/">火锅</router-link>
            </dd>
            <dd>
              <router-link to="/">代金券</router-link>
            </dd>
          </dl>
          <dl class="movie navi-l">
            <dt>电影</dt>
            <dd>
              <router-link to="/">熊出没</router-link>
            </dd>
            <dd>
              <router-link to="/">比悲伤更悲伤的故事</router-link>
            </dd>
            <dd>
              <router-link to="/">金刚狼</router-link>
            </dd>
            <dd>
              <router-link to="/">忍者神龟</router-link>
            </dd>
            <dd>
              <router-link to="/">赤兔</router-link>
            </dd>
          </dl>
          <dl class="app">
            <dt>手机应用</dt>
            <dd>
              <a
                href="https://waimai.meituan.com/mobile/download/default"
                target="_blank"
                ><img
                  class="appicon"
                  src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/waimai.png"
                  title="外卖app"
                  alt="外卖app"
              /></a>
            </dd>
            <dd>
              <a href="https://minsu.meituan.com/app/" target="_blank"
                ><img
                  class="appicon"
                  src="https://p0.meituan.net/travelcube/162c3308d9622f6d9cfaa49e60be4dca8573.png"
                  title="民宿app"
                  alt="民宿app"
              /></a>
            </dd>
            <dd>
              <a
                href="https://i.meituan.com/mobile/down/meituan"
                target="_blank"
                ><img
                  class="appicon"
                  src="//s0.meituan.net/bs/fe-web-meituan/2d53095/img/appicons/meituan.png"
                  title="美团app"
                  alt="美团app"
              /></a>
            </dd>
            <dd>
              <a
                href="https://www.dianping.com/events/m/index.htm"
                target="_blank"
                ><img
                  class="appicon"
                  src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/dianping.png"
                  title="点评app"
                  alt="点评app"
              /></a>
            </dd>
            <dd>
              <a href="https://maoyan.com/app" target="_blank"
                ><img
                  class="appicon"
                  src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/maoyan.png"
                  title="猫眼app"
                  alt="猫眼app"
              /></a>
            </dd>
          </dl>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>
<style lang="less" scoped>
.header-nav {
  .nav {
    display: flex;
    li {
      position: relative;
      width: 78px;
      height: 40px;
      box-sizing: border-box;
      text-align: center;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;

      a {
        display: block;
        &:hover {
          color: #fe8c00;
        }
      }
      &:not(:nth-of-type(2)):hover {
        border: 1px solid #e5e5e5;
        border-top: none;
        background: #fff;
        .list {
          display: block;
        }
      }
      .list {
        width: 78px;
        border: 1px solid #e5e5e5;
        background: #fff;
        box-sizing: border-box;
        position: absolute;
        top: 95%;
        right: -1px;
        z-index: 9999;
        display: none;
        &::after {
          content: "";
          width: 76px;
          height: 4px;
          background: #fff;
          position: absolute;
          top: -2px;
          right: 0;
        }
        dd {
          line-height: 35px;
          a {
            display: block;
          }
        }

        &.business {
          width: 140%;
        }
      }
      .navigation {
        width: 1200px;
        box-sizing: border-box;
        border-top-left-radius: 4px;
        padding: 30px 36px 36px 47px;

         dl {
          text-align: left;
          box-sizing: border-box;
          margin-right: 47px;
          float: left;
          dt {
            margin-bottom: 26px;
            font-size: 15px;
            color:#333;
            text-align: center;
          }

          dd {
            width: 78px;
            display: inline-block;
            text-align: center;
            font-size: 12px;
          }

          &.hotel {
            width: 234px;
          }

          &.food {
            width: 156px;
          }

          &.movie {
            width: 90px;
            dd {
              width: 100%;
            }
          }

          &.app {
            width: 380px;
            flex: 1;
            text-align: center;
            float: right;
            dd {
              width: 60px;
              height: 60px;
              margin: 0 8px;
              img {
               width: 100%;
               height: 100%;
               object-fit: cover;
              }
            }
          }
        }
      }
    }
  }
}
</style>